<template>
	<view class="starContainer">
		<image class="star_img" v-for="(item,index) in starArr" :key="index" :src="'/static/images/b-'+item+'.png'" />
	</view>
</template>

<script>
	export default {
		name: "Star",
		props: ['score'],
		computed: {
			starArr() {
				let scoreArr = [];
				let n = this.score / 2;
				let num = Math.min(Math.floor(n), 5); // 全星的个数
				for (let i = 0; i < num; i++) {
					scoreArr.push('on');
				}
				// 半星
				if (n % 1 >= 0.5) {
					scoreArr.push('half');
				}
				// 灰星
				let grayStarNum = 5 - scoreArr.length;
				for (let i = 0; i < grayStarNum; i++) {
					scoreArr.push('off');
				}
				return scoreArr;
			}
		}
	}
</script>

<style>
	.star_img {
		width: 25rpx;
		height: 25rpx;
	}
</style>
